﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>波浪运动</title>
		<style type="text/css">
			div {
				width: 600px;
				height: 100px;
				border: 5px #0C3 solid;
			}
			
			ul {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			ul li {
				width: 100px;
				height: 100px;
				background-color: #06C;
				border-radius: 25px;
				font-size: 36px;
				color: #fff;
				text-align: center;
				margin-right: 20px;
				line-height: 100px;
			}
			
			ul li {
				float: left;
				position: relative;
				top: 100px;
			}
		</style>
	</head>

	<body>
		<h1>setTimeout实战训练</h1>
		<div>
			<ul id="myul">
				<li>波</li>
				<li>浪</li>
				<li>运</li>
				<li>动</li>
			</ul>
		</div>
		<script type="text/javascript">
			var myul = document.getElementById("myul");
			var lis = myul.getElementsByTagName("li");

			function B(t) {
				var i = 100;

				function A() {
					i -= 10;
					lis[t].style.top = i + "px";
					if(i > 0) setTimeout(A, 100);
				}
				A();
			}

			setTimeout(B, 500, 0);
			setTimeout(B, 1000, 1);
			setTimeout(B, 1500, 2);
			setTimeout(B, 2000, 3);
		</script>
	</body>

</html>